<template>
  <div>
    <van-field
      v-model="value"
      is-link
      name="picker"
      :label="label"
      :placeholder="placeholder"
      @click="showPicker = true"
    />
    <van-popup v-model:show="showPicker" position="bottom" :style="{ height: '45%' }">
      <div class="popup-header">
        <div class="cancel" @click="onCancel">取消</div>
        <div class="confirm" @click="onConfirm">确定</div>
      </div>
      <van-checkbox-group ref="CheckboxRefs" v-if="componentProps.options"  v-model="checked">
        <van-cell-group inset>
          <van-cell
            v-for="(item, index) in componentProps.options"
            clickable
            :key="item"
            :title="`${item.text}`"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
                shape="square"
                :name="item.value"
                :ref="el => checkboxRefs[index] = el"
                @click.stop
              >
              </van-checkbox>
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>
  </div>
</template>

<script>
import {
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Field as VanField,
  Picker as VanPicker,
  Popup as VanPopup,
  Checkbox as VanCheckbox,
  CheckboxGroup as VanCheckboxGroup 
} from "vant";
export default {
  name: "CommonCheckbox",
  components: {VanCell,VanCellGroup, VanField, VanPicker, VanPopup ,VanCheckbox, VanCheckboxGroup},
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    componentProps: {
      type: Object,
      default: ()=>{},
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    modelValue: {
      // 数据变化时执行的逻辑代码
      handler(newValue, oldValue) {
        if (!newValue) {
          this.value = "";
          this.checked=[];
          this.$refs.CheckboxRefs.toggleAll(false)
        }
      },
      // 开启深度监听
      deep: true,
    },
  },
  data() {
    return {
      showPicker: false,
      value: "",
      checkboxRefs :[],
      checked :[]
    };
  },
  methods: {
    toggle (index){
      this.checkboxRefs[index].toggle()
    },
    onBeforeUpdate(){
      this.checkboxRefs = [];
    },
    onCancel(){
      this.$refs.CheckboxRefs.toggleAll(false)
      this.$emit("update:modelValue",'');
      this.value = "";
      this.showPicker = false;
    },
    onConfirm() {
      if(!this.componentProps.options){
        return false;
      }
      this.$emit("update:modelValue", this.checked.join(","));
      this.value =  this.componentProps.options.filter(item=> this.checked.includes(item.value) ).map(item=>item.text).join("、") ;
      this.showPicker = false;
    },
  },
};
</script>


<style>
.popup-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 50px;
  padding: 0 20px;
  font-size: 14px;
}
.popup-header .confirm{
  color: #576b95;
}

</style>